<template>
    <link rel="stylesheet" href="http://tp.x-mii.com/storage/yyjk/css/screen.css">
    <link rel="stylesheet" href="http://tp.x-mii.com/storage/yyjk/css/common.css">
    <Header />


    <div class="banner hidden-xs category-banner" style="center no-repeat; margin-top:0"
        :style="{ backgroundImage: 'url(' + category.image_url + ')' }">
    </div>

    <section>
        <div class="breadcrumbs">
            <div class="w12">
                <p class="fl wow animated fadeInLeft animated animated"
                    style="visibility: visible; animation-name: fadeInLeft;">
                    <a href="/">首页 </a> &gt;

                    <template v-for="item in category_path">
                        &gt;
                        <a :href="'/yyjk/category/' + item.id">{{ item.name }} </a>
                    </template>
                    
                </p>
                <ul class="inside-nav fr wow animated fadeInRight animated animated"
                    style="visibility: visible; animation-name: fadeInRight;">

                    <li v-for="item in category_bro">
                        <a :href="'/yyjk/category/' + item.id" :class="category.id == item.id ? 'active' : ''">
                            {{ item.name }}
                        </a>
                    </li>

                </ul>
                
            </div>
        </div>




        <div class="public-main w12">
            <el-row>
                <!-- <el-col :span="6">
                    <div class="grid-content ep-bg-purple">
                        产品中心导航
                    </div>

                </el-col> -->
                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light">

                        <!-- 这里 是产品图片和属性   -->

                        <div class="img-and-attr">
                            <div class="img" v-if=" article.image ">
                                <img v-if="article.image.indexOf('http')==-1" :src="vite_url + '/storage/' + article.image" alt="">
                                <img v-if="article.image.indexOf('http')>-1" :src="article.image" alt="">
                            </div>
                            <div class="attr" >

                                <h2 class="title">{{ article.title }}</h2>
                                <dl v-for=" item in article.custom ">
                                    <dt v-show="item.key">{{ item.key }}</dt>
                                    <dd v-show="item.value">{{ item.value }}</dd>
                                </dl>

                            </div>
                        </div>

                        <!-- 这里 填充富文本内容   -->
                        <div class="detail-title">
                            详情
                        </div>
                        <div v-html="article.content"></div>

                    </div>
                </el-col>
            </el-row>
        </div>

    </section>
    <YyjkFooterSub></YyjkFooterSub>
</template>

<script lang="ts" setup >

import Header from '../../../components/common/Header.vue'
import YyjkFooterSub from '../../../components/yyjk/common/FooterSub.vue'

import { ref } from 'vue'
import axios from 'axios';
import { useRoute } from 'vue-router';
const route = useRoute();
const vite_url = window.VITE_URL;

const article_id: any = ref<object>();
const article: any = ref<object>({
    // content: ''
});

const category_id: any = ref<number>(0);
const category: any = ref<object>();
const category_path: any = ref<Array<object>>();
const category_bro: any = ref<Array<object>>();


const get_article = () => {

    const url = vite_url + '/cms/article/' + article_id.value;
    axios.get(url).then((res: any) => {

        article.value = res.data.article;

        // article.value.content = encodeURIComponent( article.value.content )
        // article.value.content = article.value.content;

        category_id.value = article.value.category_id ? article.value.category_id : 0;
        get_category_info();
        get_category_bro();
    });
}

const get_category_info = () => {

    const url = vite_url + '/cms/category/' + category_id.value;
    axios.get(url).then((res: any) => {

        category.value = res.data.category;
        if (category.value.image) {
            category.value.image_url = vite_url + '/storage/' + category.value.image;
        } else {
            category.value.image_url = 'http://api.qd-ian.com/storage/images/8/cms/yhyj/lunbo1.jpg';
        }
        category_path.value = res.data.category_path.path;

    });
}

const get_category_bro = () => {

    const url = vite_url + '/cms/category_bro/' + category_id.value + '';
    axios.get(url).then((res: any) => {

        category_bro.value = res.data;

    });
}

const init = () => {

    article_id.value = route.params.id ? route.params.id : 0;
    get_article();

}

init();

</script>

<style lang="less" scoped >
.img-and-attr {

    display: flex;
    // justify-content: space-between;
    justify-content: flex-start;

    .img {

        width: 450px;
        height: 410px;
        text-align: center;
        overflow: hidden;
        border: solid 1px #cdcdcd;

        img {
            // max-width:100%;
            height: 100%;
        }
    }

    .attr {
        padding-left:20px;
        box-sizing: border-box;
        // width: 50%;
        height: 45%;

        .title {

            text-align: left;
            margin-bottom: 20px;
        }

        .description {

            margin-top: 10px;
        }

        dl {
            line-height: 2;
            display: flex;
            justify-content: flex-start;

            dt {

                &::after {
                    content: "：";

                }

            }

            dd {}
        }
    }
}

.detail-title {

    color: #E70012;
    border-bottom: solid 1px #cdcdcd;

    font-size: 20px;
    font-weight: bold;
    margin: 50px 0 20px;
    line-height: 2;
}</style>